<template>
  <div
    class="app-container flex flex-sub"
    style="background: none; height: 100%; padding: 1rem"
    v-if="!isShowBinding"
  >
    <div class="flex" style="height: 100%; width: 100%">
      <el-card shadow="never" class="box-card flex-sub">
        <div style="display: flex; padding: 0 10px">
          <div style="border: 1px solid #c8c8c8; padding: 0.7rem; width: 500px">
            <div
              class="flex"
              style="margin-bottom: 1rem; justify-content: space-between"
            >
              <el-button size="small" @click="toExpandAll('是')">
                <i class="el-icon-plus" style="color: #606266" />
                <span style="color: #606266">全部展开</span>
              </el-button>

              <el-button size="small" @click="toExpandAll('否')">
                <i class="el-icon-minus" style="color: #606266" />
                <span style="color: #606266">全部收起</span>
              </el-button>

              <el-button size="small" @click="toRefreshGridTree">
                <i class="el-icon-refresh" style="color: #606266" />
                <span style="color: #606266">刷新</span>
              </el-button>
            </div>
            <el-input
              v-model="gridName"
              style="margin-bottom: 1rem"
              placeholder="请输入网格名称"
              prefix-icon="el-icon-search"
              class="filter-item search-item"
              @keyup.native="toSearchGridTree"
            />

            <div
              style="margin-right: 0px; overflow: auto"
              :style="{ height: gridTreeHeight }"
              class="box-card"
            >
              <div v-show="showRightMenu">
                <ul id="menu" class="right-menu">
                  <li
                    class="menu-item"
                    @click="toClickRightMenu('绑定设备点位')"
                  >
                    <i
                      class="iconfont icon-kuaijie-shebeibangdingdianwei"
                      style="margin-right: 4px; font-weight: bold"
                    ></i>
                    绑定设备点位
                  </li>
                </ul>
              </div>

              <el-tree
                ref="refGridTree"
                :data="gridTree"
                node-key="id"
                :filter-node-method="filterNode"
                :highlight-current="highlightCurrent"
                :expand-on-click-node="expandOnClickNode"
                :default-expand-all="expandAll"
                @node-contextmenu="rightClick"
                @node-click="nodeCick"
                @node-expand="nodeExpand"
                @node-collapse="nodeCollapse"
              />
            </div>
          </div>
          <div style="margin-left: 3rem; flex: 1">
            <div
              style="text-align: center; font-size: 30px; margin-bottom: 30px"
            >
              消防设备绑定2D平面图操作流程
            </div>
            <div
              style="font-size: 17px; line-height: 25px; margin-bottom: 10px"
            >
              <span style="color: #409eff; font-size: 18px"> 第一步：</span
              >在左侧区域搜索或者光标选择到需要绑定网格结构中的节点名称，点击<span
                style="color: red; font-weight: bold"
                >鼠标右键</span
              >选项“绑定设备点位”点击进入该页面。
            </div>

            <div
              style="font-size: 17px; line-height: 25px; margin-bottom: 10px"
            >
              <span style="color: #409eff; font-size: 18px"> 第二步：</span
              >在绑定设备点位页面左侧“采集设备列表”输入框输入设备名称，或在设备名称列表找到该设备，选择要绑定的设备名称。
            </div>

            <div
              style="font-size: 17px; line-height: 25px; margin-bottom: 10px"
            >
              <span style="color: #409eff; font-size: 18px"> 第三步：</span
              ><span style="color: red; font-weight: bold">鼠标左键</span
              >点击平面图需要放置选中设备的位置，使其设备绑定到该位置。
            </div>

            <div
              style="font-size: 17px; line-height: 25px; margin-bottom: 10px"
            >
              <span style="color: #409eff; font-size: 18px"> 第四步：</span
              >按照第三步依次绑定其余设备点位。
            </div>

            <div
              style="font-size: 17px; line-height: 25px; margin-bottom: 10px"
            >
              <span style="color: #409eff; font-size: 18px"> 第五步：</span>
              <!-- <span  style="color:blue;font-weight: bold;">鼠标左键</span>点击平面图中的任一设备，弹出该设备信息；<span  style="color:blue;font-weight: bold;">右键点击</span>删除该设备在平面图中绑定的位置 -->
              <span style="color: blue; font-weight: bold">鼠标右键</span
              >点击平面图中的任一设备，弹出该设备信息；点击<span
                style="color: blue; font-weight: bold"
                >删除按钮</span
              >将删除该设备在平面图中绑定的位置
            </div>

            <div
              style="font-size: 17px; line-height: 25px; margin-bottom: 10px"
            >
              <span style="color: #409eff; font-size: 18px"> 第六步：</span
              >完成后点击“保存”按钮。
            </div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- <div class="flex" style="height: 100%; width: 450px">
      <el-card shadow="never" class="box-card flex-sub" style="overflow: auto">
        <div style="display: flex; justify-content: center">
          <div style="border: 1px solid #c8c8c8; padding: 0.7rem">
            <div>
              <div
                class="flex"
                style="margin-bottom: 1rem; justify-content: space-between"
              >
                <el-button size="small" @click="toExpandAll('是')">
                  <i class="el-icon-plus" style="color: #606266" />
                  <span style="color: #606266">全部展开</span>
                </el-button>

                <el-button size="small" @click="toExpandAll('否')">
                  <i class="el-icon-minus" style="color: #606266" />
                  <span style="color: #606266">全部收起</span>
                </el-button>

                <el-button size="small" @click="toRefreshGridTree">
                  <i class="el-icon-refresh" style="color: #606266" />
                  <span style="color: #606266">刷新</span>
                </el-button>
              </div>
              <el-input
                v-model="gridName"
                style="margin-bottom: 1rem"
                placeholder="请输入网格名称"
                prefix-icon="el-icon-search"
                class="filter-item search-item"
                @keyup.native="toSearchGridTree"
              />

              <div
                style="margin-right: 0px; overflow: auto"
                :style="{ height: gridTreeHeight }"
                class="box-card"
              >
                <div v-show="showRightMenu">
                  <ul id="menu" class="right-menu">
                    <li
                      class="menu-item"
                      @click="toClickRightMenu('绑定设备点位')"
                    >
                      <i
                        class="iconfont icon-kuaijie-shebeibangdingdianwei"
                        style="margin-right: 4px; font-weight: bold"
                      ></i>
                      绑定设备点位
                    </li>
                   
                  </ul>
                </div>

                <el-tree
                  ref="refGridTree"
                  :data="gridTree"
                  node-key="id"
                  :filter-node-method="filterNode"
                  :highlight-current="highlightCurrent"
                  :expand-on-click-node="expandOnClickNode"
                  :default-expand-all="expandAll"
                  @node-contextmenu="rightClick"
                  @node-click="nodeCick"
                  @node-expand="nodeExpand"
                  @node-collapse="nodeCollapse"
                />
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </div> -->
  </div>

  <div
    v-else
    class="app-container"
    style="background: none; width: 100%; height: 100%; padding: 1rem"
  >
    <binding
      :deviceDictionaries="deviceDictionaries"
      :selectGridData="selectNodeData"
      @back="goBack"
    ></binding>
  </div>
</template>
<script>
import deviceManageApi from '@/api/device-manage'
import GridManageApi from '@/api/grid-manage'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import Binding from './component/Binding'

export default {
  name: 'DeviceBinding2D',
  components: {
    Treeselect,
    Binding,
  },
  props: {},
  data() {
    return {
      deviceDictionaries: [],
      gridTreeHeight: this.getHeightAndWidth(),
      gridTree: [],
      gridName: '',
      expandOnClickNode: false,
      expandAll: false,
      highlightCurrent: true,
      showRightMenu: false,
      selectNodeData: {},

      isShowBinding: false,
    }
  },
  watch: {
    gridName(val) {
      this.$refs.refGridTree.filter(val)
    },
  },
  created() {},
  mounted() {
    this.getDictValueAttr()
  },

  methods: {
    getHeightAndWidth() {
      let clientHeight = 0
      if (
        document.body.scrollHeight === window.screen.height &&
        document.body.scrollWidth === window.screen.width
      ) {
        clientHeight = window.screen.height - 5 // 网页可见区域高
      } else {
        clientHeight = document.body.clientHeight - 5 // 网页可见区域高
      }
      return clientHeight - 310 + 'px'
    },
    getDictValueAttr() {
      const data = {
        fieldName: 'collect_type',
        tableName: 't_equipment_collect',
      }
      deviceManageApi.getDictValueAttr(data).then((ret) => {
        this.deviceDictionaries = ret.data.dictValue
        this.getGridTree()
      })
    },

    getGridTree() {
      GridManageApi.getGridTree()
        .then((res) => {
          this.gridTree = res.data.data.rows
        })
        .catch(() => {
          this.gridTree = []
        })
    },
    toSearchGridTree() {
      this.$refs.refGridTree.filter(this.gridName)
    },
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    toRefreshGridTree() {
      this.gridName = ''
      this.getGridTree()
    },
    toExpandAll(text) {
      if (text === '是') {
        this.expandAll = true
      } else {
        this.expandAll = false
      }
      for (
        var i = 0;
        i < this.$refs.refGridTree.store._getAllNodes().length;
        i++
      ) {
        this.$refs.refGridTree.store._getAllNodes()[i].expanded = this.expandAll
      }

      // console.log('测试')
      // this.$refs.refGridTree.$children.forEach(
      //   (item) => (item.expanded = this.expandAll)
      // )
    },
    rightClick(event, data, node, obj) {
      this.$refs.refGridTree.setCurrentKey(data.id)

      this.showRightMenu = false // 先把模态框关死，目的是：第二次或者第n次右键鼠标的时候 它默认的是true
      this.showRightMenu = true
      const menu = document.querySelector('#menu')
      menu.style.left = event.clientX - 250 + 'px'
      menu.style.top = event.clientY - 0 + 'px'
      // 给整个document添加监听鼠标事件，点击任何位置执行closeRightMenu方法，及时将菜单关闭
      document.addEventListener('click', this.closeRightMenu)
      // console.log('event', event, event.clientX, event.clientY)
      // console.log('data', data)
      // console.log(node)

      this.selectNodeData = data
    },
    closeRightMenu() {
      this.showRightMenu = false
      // 及时关掉鼠标监听事件
      document.removeEventListener('click', this.closeRightMenu)
    },
    nodeCick(data) {
      this.closeRightMenu()
    },
    nodeExpand(data) {
      this.closeRightMenu()
    },
    nodeCollapse(data) {
      this.closeRightMenu()
    },
    toClickRightMenu(type) {
      if (type === '绑定设备点位') {
        this.isShowBinding = true
      }
    },

    goBack() {
      this.isShowBinding = false
    },
  },
}
</script>

<style lang="scss" scoped>
@import '../../../../../styles/part-custom';
.right-menu {
  z-index: 1;
  position: absolute;
  width: 150px;
  position: absolute;
  border-radius: 5px;
  list-style: none;
  background: linear-gradient(rgb(246, 247, 249) 0%, rgb(235, 237, 240) 100%);
  border: 1px solid rgb(217, 214, 196);
  box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 3px 0px;
  color: rgb(31, 31, 31);
  margin: 0px;
  padding: 0px 5px 5px 5px;
  .menu-item {
    margin-top: 5px;
    border-radius: 4px;
    font-size: 14px;
    color: #222222;
    text-align: left;
    padding: 6px 10px;
    cursor: pointer;
    transition: color 0.3s;
  }
  li:hover {
    background-color: #a6a6a6;
    color: #ffffff;
  }
}
</style>